<template>
  <div class="h-[100vh] overflow-hidden">
    <!-- 头部 -->
    <header class="w-full h-[72px] bg-[var(--headBg)] px-2 flex items-center justify-between">
      <div class="flex flex-1 items-center h-full">
        <i class="iconfont icon-qiepian rounded-full bg-[var(--text)] text-[var(--contentBg)] py-1 px-2 mx-1"></i>
        <span class="ml-2 text-lg text-[var(--text)]">灵音织梦</span>
        <span @click="$router.back()"
          class="iconfont icon-a-zuojiantouzhixiangzuojiantou cursor-pointer rounded-full hover:bg-[var(--hoverBg)] text-[var(--text)] transition-all py-2 px-3 mx-1 ml-24"></span>
        <span @click="$router.go(1)"
          class="iconfont icon-a-youjiantouzhixiangyoujiantou cursor-pointer rounded-full hover:bg-[var(--hoverBg)] text-[var(--text)] transition-all py-2 px-3 ml-1 mr-4"></span>
        <!-- <span
            class="iconfont icon-maikefeng cursor-pointer rounded-full hover:bg-[var(--hoverBg)] text-[var(--text)] transition-all py-2 px-3 mx-1">
          </span> -->
      </div>
      <div class="flex flex-1 items-center h-full justify-end">
        <!-- 未登录 -->
        <login v-if="isLogin"></login>
        <!-- 已登录 -->
        <user v-else></user>
        <div class="relative">
          <!-- <span
            class="bg-[var(--hoverBg)] cursor-pointer text-[var(--contentBg)] px-1 text-xs rounded-full ml-2 mr-4 select-none">vip开通
            &gt;</span> -->
          <i class="header_icon iconfont icon-tiaoseban" @click="themeValue = !themeValue"></i>
          <i class="header_icon iconfont icon-shezhi"></i>
          <i class="header_icon iconfont icon-youjian_o"></i>
          <i class="header_icon iconfont icon-zuixiaohua" @click="minBtn"></i>
          <i class="header_icon iconfont icon-a-8Jxiangxiahuanyuan" @click="maxBtn"></i>
          <i class="header_icon iconfont icon-guanbi" @click="closeBtn"></i>
          <!-- 调色板 -->
          <Transition name="fade">
            <theme v-if="themeValue" />
          </Transition>
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main class=" bg-[var(--headBg)] flex h-[calc(100vh-72px)] overflow-hidden">
      <!-- 左侧边栏 -->
      <div class="min-w-fit h-[calc(100vh-72px)] overflow-auto no-scrollbar">
        <ul>
          <li @click="goToHome"
            :class="{'active': activeIndex === 0}"
            class="leftMenu w-52 transition-all h-11 rounded-r-3xl text-[var(--text)] mb-1 pl-4 hover:cursor-pointer flex justify-start items-center">
            <i @click.stop class="mr-2 iconfont icon-shouye before:text-xl"></i>
            <span>发现</span>
          </li>
          <li :class="{'active': activeIndex === 1}" @click="goToSheQu" class="leftMenu listStyle">
            <i @click.stop class="mr-2 iconfont icon-shipinbofang before:text-xl"></i>
            <span>社区</span>
          </li>
          <li :class="{'active': activeIndex === 2}" @click="goToCreate" class="listStyle leftMenu">
            <i @click.stop class="mr-2 iconfont icon-area before:text-xl"></i>
            <span>发布</span>
          </li>
        </ul>
        <p class="text-slate-400 text-xs pl-3 pb-2">我的喜欢</p>
        <ul>
          <li :class="{'active': activeIndex === 3}" @click="gotoLike" class="leftMenu listStyle">
            <i @click.stop class="mr-2 iconfont icon-aixin before:text-xl"></i>
            <span>我喜欢的音乐</span>
            <span
              class="iconfont icon-line_aixin px-3 border border-[var(--icon)] before:text-2xl transition-all hover:border-transparent ml-2 hover:bg-[var(--playBg)] hover:text-[var(--contentBg)] rounded-2xl"></span>
          </li>
          <!-- <li class="leftMenu listStyle">
              <i class="mr-2 iconfont icon-xiazai before:text-xl"></i>
              <span>本地与下载</span>
            </li> -->
          <!-- <li class="leftMenu listStyle">
              <i class="mr-2 iconfont icon-round-restore-px before:text-xl"></i>
              <span>最近播放</span>
            </li> -->
        </ul>
      </div>
      <!-- 中间内容区域 -->
      <div id="main"
        class="px-12 py-7 bg-[var(--contentBg)] z-0 relative w-full rounded-tl-2xl h-[calc(100vh-72px)] overflow-auto no-scrollbar flex justify-center">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>
<script setup lang='ts'>
  import { onMounted, ref, watch, getCurrentInstance, computed, reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import user from '@renderer/components/userInfo.vue'

  const { ipcRenderer } = require('electron');

  const router = useRouter()
  // 指定this
  const ctx = getCurrentInstance()
  const bus = ctx?.appContext.config.globalProperties.$bus
  let isLogin = ref(false)
  const userInfo = ref < profileType > (JSON.parse(localStorage.getItem('user') as string))
  const themeValue = ref(false)
  const activeIndex = ref(0)
  onMounted(() => {
    bus.on('login', async () => {
      isLogin.value = false
      userInfo.value = JSON.parse(localStorage.getItem("user") as string)
    })
    bus.on('loginOut', () => {
      isLogin.value = true
    })
  })

  const goToCreate = () => {
    activeIndex.value = 2
    router.push('/create')
  }
  const goToHome = () => {
    activeIndex.value = 0
    router.push('/')
  }
  const gotoLike = () => {
    activeIndex.value = 3
    router.push('/myLike')
  }
  const goToSheQu =()=>{
    activeIndex.value = 1
    router.push('/community')
  }
  // 关闭按钮
  const closeBtn = () => {
    ipcRenderer.send('window-close')
  }
  // 最小化按钮
  const minBtn = () => {
    ipcRenderer.send('window-min')
  }
  // 最大化按钮
  const maxBtn = () => {
    ipcRenderer.send('window-max')
  }
  // 全屏显示
  const fullScreen = () => {
    ipcRenderer.send('window-full')
    isFullScreen.value = false
  }
  // 退出全屏
  const backFullScreen = () => {
    ipcRenderer.send('window-exit-full')
    isFullScreen.value = true
  }
</script>
<style scoped lang="less">
  header {
    &>div {
      -webkit-app-region: drag;
      transform: rotate(0deg) translateX();
    }

    * {
      -webkit-app-region: no-drag;
    }
  }

  .animate-spin {
    animation: spin 50s linear infinite;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .animate_bg {
    background: linear-gradient(125deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5));
    background-size: 500%;
    animation: animateBg 30s linear infinite;
  }

  @keyframes animateBg {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  :deep(.el-dialog) {
    padding: 0;
    border-radius: 15px;
  }

  :deep(.el-dialog__header) {
    margin: 1rem 1rem 0;
  }

  .active {
    background-color: var(--active);
    font-weight: bold;
  }
</style>